<template>   
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-container>
      <b-navbar-brand @click="$router.push({name: 'home'})">BlogDemo</b-navbar-brand>   

      <!--以下部分靠右对齐-->
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>    
      <b-collapse id="nav-collapse" is-nav>   
        <b-navbar-nav class="ml-auto">      

          <!-- 搜索框 阅读文章用例负责人可修改此部分-->  
          <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" v-model="search_key" placeholder="Search"></b-form-input>
            <b-button size="sm" class="my-2 my-sm-0" type="submit"
            @click="tosearch(search_key)">Search</b-button>
          </b-nav-form> 
          <!-- 搜索框结束-->

          <b-nav-item-dropdown right v-if="userName">
            <template #button-content>
              <em>{{ userName }}</em>
            </template>
            <!-- 个人信息按钮 修改个人信息用例负责人可修改此部分-->  
            <b-dropdown-item @click="$router.replace({name:'userinfo'})"
            >个人主页</b-dropdown-item>
            <!-- 个人信息按钮结束-->
            
            <!-- 修改密码按钮 修改账号密码用例负责人可修改此部分-->
            <b-dropdown-item @click="$router.replace({name:'passwordChange'})">
              修改密码
            </b-dropdown-item>
            <!-- 修改密码按钮 修改账号密码用例负责人可修改此部分-->
            <b-dropdown-item @click="logout">登出</b-dropdown-item>
          </b-nav-item-dropdown>

          <!-- 创作中心按钮 -->
          <b-nav-item-dropdown right v-if="userName">
            <template #button-content>
              <em>创作中心</em>
            </template>
            <!-- 撰写博客按钮 -->  
            <b-dropdown-item @click="$router.replace({name:'writeBlog'})">
              撰写博客
            </b-dropdown-item>
            <!-- 撰写博客按钮结束-->         
            <!-- 删除博客按钮 -->
            <b-dropdown-item @click="$router.replace({name:'deleteb'})">
              删除博客
            </b-dropdown-item>
            <!-- 删除博客按钮结束-->
          </b-nav-item-dropdown>

          <!--登录按钮--> 
          <b-nav-item 
            v-if="$route.name != 'login' && !userName"  
            @click="$router.replace({name:'login'})">
            登录
          </b-nav-item>

          <!--找回密码按钮--> 
          <b-nav-item 
            v-if="$route.name != 'passwordRetrieve' && !userName"  
            @click="$router.replace({name:'passwordRetrieve'})">
            找回密码
          </b-nav-item>

          <!--注册按钮--> 
          <b-nav-item 
            v-if="$route.name != 'register' && !userName" 
            @click="$router.replace({name:'register'})">
            注册
          </b-nav-item>  

        </b-navbar-nav>       
      </b-collapse>
     
    </b-container>
  </b-navbar>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  data() {
    return{
      search_key:'',
    }
  },
  methods: {
    ...mapActions('userModule', ['logout']),
  //   tosearch(search_key){
  //   console.log("test")
  //   if(search_key.length == 0){
  //     return this.$message.error('请输入')
  //   }
  //   else{
  //     if(this.$router.name != 'Search'){
  //       this.$router.push({name:'Search', 
  //       params: {title: this.search_key} }, ()=>{}, ()=>{})
  //       this.$store.commit('SET_SEARCH_TITLE',this.search_key)
  //     }   
  //   }
  //  }
    tosearch(search_key){
      if (search_key.length == 0) return this.$message.error('你还没填入搜索内容哦')
      console.log("搜索按钮点击")
      this.$router.push({name:"Search"})
      this.$store.commit('SET_SEARCH_TITLE', this.search_key)
    },
  },
  computed: mapState({
    userName: (state) => state.userModule.userName,
  }),
  //methods: mapActions('userModule', ['logout'])
}

</script>


